<script setup>
import NavMenu from "@/components/NavMenu";
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {menuStore} from "@/store/menu";
import {commonStore} from "@/store/common";

const emit = defineEmits(['toggleMainLoading'])
const router = useRouter()
const state = reactive({
  queryParams: {},
  timeout: null,
});
const mStore = menuStore()
const commonStore1 = commonStore()
const menuRef = ref(null)

mStore.load()

function searchMenu(queryString, cb) {
  let menu = queryString ? mStore.menusArray.filter(createNameFilter(queryString)) : mStore.menusArray;
  clearTimeout(state.timeout)
  state.timeout = setTimeout(() => {
    cb(menu);
  }, 1000 * Math.random());
}

function createNameFilter(queryString) {
  return (state) => {
    return (state.title.indexOf(queryString) === 0)
  }
}

function handleSearchSelect(item) {
  if (item.children && item.children.length > 0) {
    menuRef.value.open(item.path)
  } else {
    handleSelect(item.path)
  }
}

function handleSelect(key) {
  mStore.activeMenu = key
  router.push({path: key})

}

</script>
<template>
  <div class="container">
    <div class="header">
      <div class="top-logo flex-center">
        <div class="sking-admin-logo">{{commonStore1.systemName}}</div>
      </div>
      <div class="search-div">
        <el-autocomplete
            v-model="state.queryParams.name"
            prefix-icon="el-icon-search"
            :fetch-suggestions="searchMenu"
            placeholder="搜索菜单"
            value-key="title"
            @select="handleSearchSelect"
            style="width: 90%;left:5%;margin: 5px 0 0 0">
        </el-autocomplete>
      </div>
    </div>
    <div class="body">
      <el-menu
          :uniqueOpened="true"
          :collapse="false"
          ref="menuRef"
          :default-active="mStore.activeMenu"
          class="left-menu"
          background-color="#545c64"
          text-color="#fff"
          @select="handleSelect"
          active-text-color="#ffd04b">
        <!--左侧菜单组件-->
        <NavMenu :nav-menus="mStore.menus"></NavMenu>
      </el-menu>
    </div>
  </div>
</template>


<style scoped>

.top-logo {
  height: 65px;
  text-align: center;
  background-color: #545c64;
  box-shadow: 5px 0 5px #dcdfe6;
  width: 100%;
}

div.sking-admin-logo {
  padding: 5px 0px;
  font-size: 26px;
  letter-spacing: 1px;
  font-weight: bold;
  color: hsl(210, 100%, 63%);
  text-shadow: 0 0 1px currentColor, -1px -1px 1px #606266, 0 -1px 1px #606266, 1px -1px 1px #606266, 1px 0 1px #606266, 1px 1px 1px #000, 0 1px 1px #000, -1px 1px 1px #000, -1px 0 1px #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.left-menu {
  border: 0px;
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 5px 0 5px #dcdfe6;
}

.body {
  height: calc(100% - 110px);
  flex: 1 1 auto;
}

.header {
  height: 110px;
  flex: 0 0 auto;
}

.search-div {
  background-color: #545c64;
  padding-bottom: 10px;
  border-right: 1px solid #DCDFE6;
  width: 100%;
}

.left-menu :deep(.el-menu-item) {
  min-width: auto;
}
</style>
